<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<h1>
    {{ title }}
</h1>
{# 注释 #}
<p>
    {{ txt }}
</p>
<p>
    下面是单个列表渲染<br>
    1.{{ list.0 }}<br>
    2.{{ list.1 }}
</p>
<p>
    下面是单个字典渲染<br>
    姓名：{{ doc_list.name }}<br>
    年龄：{{ doc_list.age }}
</p>
<p>
    if的使用<br>
    {% if number < 10 %}
        <span>
        我是number小于10才会显示的{{ number }}
       </span>

    {% endif %}
</p>
<p>
    <style>
        ul{
            list-style: none;
        }
        li{
            margin-bottom: 20px;
        }
    </style>
<ul>
    {% for item in lists %}
        <li>
            姓名：{{ item.name1 }} <br>
            年龄：{{ item.age }}<br>
            性别：{{ item.sex }}<br>
        </li>
    {% endfor %}
</ul>
</p>

<h2>
    这是一个ajax请求
</h2>
<form method="post" action="http://127.0.0.1:8000/ajax">
    {% csrf_token %}
用户名：
    <input name="name" class="name"></input>

    <input type="submit">
    <button>ajax提交</button>

</form>

<img src="/static/images/1.jpg">

</body>
<script>
    $("button").click(function () {
        let val=$(".name").val()
        let csrfval=$("[type='hidden']").val()
        $.ajax({
            url:"/ajax",
            method:"POST",
            data:{
                csrfmiddlewaretoken:csrfval,
                name:val
            },
            success:data=>{
                console.log(data)
            }
        })
    })
</script>
</html>